{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link type="text/css" rel="stylesheet" href="{% static 'css/index.basic.css'%}">
    <link type="text/css" rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">
    <!-- 加载jquery脚本 -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <!--加载bootstrap脚本 -->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

    <!-- 脚本 : 响应选择item --->
    <script>
        $(function (){
            $('.item').on('click',function (){
                // 获得点击的元素的文本
                item_name = $(this).text()
                // 获得点击元素的父类的第一个子类里的文本
                item_type = $(this).parent().children().eq(0).html()


                location.href = "{% url 'select' %}?name=" + item_name + "&type=" + item_type
            });
            $("[data-toggle='tooltip']").tooltip();
            $('#btn_keyword').on('click',function (event){
                 keyword = $('#input_keyword').val();
                 location.href = "{% url 'keyword' %}?keyword=" + keyword
            });
            $('#btn_getall').on('click',function (event){
                 location.href = "{% url 'getall' %}"
            });
            $('#order_asc').on('click',function (){
                location.href = "{% url 'order' %}?order=1"
            });
            $('#order_desc').on('click',function (){
                location.href = "{% url 'order' %}?order=2"
            })
        })
        
    </script>
</head>
<body>
    <div id="header" style="background-color: white">
        <div><img src="{% static 'img/book_logo.png' %}" style="height: 110px;margin-left: -50px"> </div>
    </div>
    <div id="select" >
        <div id="select_type">
            <div class="title">类别：</div>
            {% for item in select_item.type %}
                {% if selected.type.1 == item %}
                    <div class="item" style="color: red" id="type"> {{ item }}</div>
                {% else %}
                    <div class="item" id="type">{{ item }}</div>
                {% endif %}
            {% endfor %}
        </div>
        <div id="select_price">
            <div class="title">价格：</div>
            {% for item in select_item.price %}
                {% if selected.price.0 == item %}
                    <div class="item" style="color: red"> {{ item }}</div>
                {% else %}
                    <div class="item">{{ item }}</div>
                {% endif %}
            {% endfor %}
        </div>
        <div id="select_press">
            <div class="title">难度：</div>
            {% for item in select_item.difficult %}
                {% if selected.difficult.1 == item %}
                    <div class="item" style="color: red"> {{ item }}</div>
                {% else %}
                    <div class="item">{{ item }}</div>
                {% endif %}
            {% endfor %}
        </div>
        <div id="select_author">
            <div class="title">作者：</div>
            {% for item in select_item.author %}
                {% if selected.author.1 == item %}
                    <div class="item" style="color: red"> {{ item }}</div>
                {% else %}
                    <div class="item">{{ item }}</div>
                {% endif %}
            {% endfor %}

        </div>
        <div id="keyword">
            <div class="title">图书关键字：</div>
            <div class="input_keyword" ><input type="text" id="input_keyword" class="input-group" ></div>
            <div class="btn_submit"><input type="button" id="btn_keyword" class="btn btn-sm" value="查询"> </div>
            <div class="btn_submit"><input type="button" id="btn_getall" class="btn btn-sm" value="显示全部" > </div>
        </div>
    </div>

    <div id="top_content" >

        <div class="left">符合条件的图书：</div>
        <div class="right">
            <div>排序：
                {% if selected.order == 1 %}
                    <button type="button" class="btn btn-default" aria-label="Left Align" id="order_asc" style="background-color: grey">
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </button>
                {% else %}
                    <button type="button" class="btn btn-default" aria-label="Left Align" id="order_asc">
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </button>
                {% endif %}
                {% if selected.order == 2 %}
                     <button type="button" class="btn btn-default" aria-label="Left Align" id="order_desc" style="background-color: grey">
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                     </button>
                {% else %}
                     <button type="button" class="btn btn-default" aria-label="Left Align" id="order_desc">
                         <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                     </button>
                {% endif %}
                &nbsp;
            </div>
        </div>
    </div>
    <div id="content_container" class="container">
    {% if books_list|length == 0 %}
        <div>没有符合的图书</div>
    {% else %}
        {% for books in books_list %}
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="thumbnail">
                <img src="{{ books.img }}">
                <div style="padding-top: 15px;margin-bottom:-30px;margin-left:20px;color: red;font-size: 30px">{{ books.bookprice }}</div>
                <div style="float: right;margin-bottom: 20px;margin-right: 30px">{{ books.author }}</div>
                <h4 style="text-align: center">{{ books.bookname }}</h4>
                <h5>
                   <a href="#" data-toggle="tooltip" data-placement="right" title="{{ books.tip.1 }}">
                        {{ books.tip.0 }}
                   </a>
                </h5>
            </div>
        </div>
        {% endfor %}
        <nav class="pagination">
            <span class="step-links">
                {% if books_list.has_previous %}
                    <a href="?page=1">&laquo; 首页</a>
                    <a href="?page={{ books_list.previous_page_number }}">上一页</a>
                {% endif %}
                <span class="current">
                    {{ books_list.number }}/{{ books_list.paginator.num_pages }}
                </span>
                {% if books_list.has_next %}
                    <a href="?page={{ books_list.next_page_number }}">下一页</a>
                    <a href="?page={{ books_list.paginator.num_pages }}">末页 &raquo;</a>
                {% endif %}
            </span>
        </nav>
    {% endif %}
    </div>
    <div id="footer">
        <div class="content">
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之基础入门</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之GUI开发</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之前端开发</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之数据库</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之Web框架</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之爬网</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之数据分析</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之数据可视化</div>
            <div><span class="glyphicon glyphicon-user"></span>跟着王进老师学Python之人工智能</div>
        </div>
    </div>
</body>
</html>